/*
 * zxt.fieldset.js
 *
 * Copyright (c) 2010 CUPDATA
 *
 * version 1.0.0
 * history:	lizz 2010-01-18 created
 */

/**
 * <p>
 * 一个基于Fieldset的布局控件，并且可将内部元素收缩
 * </p>
 * 
 * @class 可以被用来布局一个区域，将一组控件集中展示或收缩
 * @param {string} title 区域标题显示的文本
 * @param {string} [width = "100%"] 区域的宽度
 * @param {string} [folded = false] 是否以收缩状态加载，true为收缩，false为展开，默认为展开
 * @param {string} [fixed = false] 标志区域是否为可收缩，true为固定，false为可收缩，默认为可收缩
 */
zxt.ui.Fieldset = function(title, width, folded, fixed) {
	
	zxt.ui.Widget.call(this);
	
	/* 常量 */	
	this.SHOWICON = zxt.cfg.IMAGES_PATH + "/fieldsetShow.png";
	this.HIDEICON = zxt.cfg.IMAGES_PATH + "/fieldsetHide.png";
	this.SHOWMESS = "展开";
	this.HIDEMESS = "收缩";
	//this.CSS_FIELDCLOSE = "fieldsetClose";
	//this.CSS_FIELDSET = "fieldset";
	//this.CSS_TITLE = "fieldset-title";
	this.CSS_HOVER = "fieldset-legendHover";
	
	
	this._title = title;
	this._width = width || "100%";
	this._fixed = !!(fixed == "true" || fixed == true);
	this._folded = !!(folded == "true" || folded == true);

	this._$jqDom = $("<div style='position: relative;'/>");
	this._$fieldset = $("<fieldset width = \"" + this._width + "\"></fieldset>");
	this._$legend = $("<legend class='fieldset-legend'/>");
	this._$foldImg = $("<img class='fieldset-foldImg'/>");
	this._$contentDiv = $("<div>");

};

/**
 * <p>
 * 根据传入的DOM元素, 解析传入的相关属性, 创建相应的区域
 * </p>
 * 
 * @function
 * @static
 * @param {DOM} elem 传入的DOM元素
 * @param {string} zxt.title 区域标题显示的文本
 * @param {string} [zxt.width = "100%"] 区域的宽度
 * @param {string} [zxt.folded = false] 是否以收缩状态加载，true为收缩，false为展开，默认为展开
 * @param {string} [zxt.fixed = false] 标志区域是否为可收缩，true为固定，false为可收缩，默认为可收缩
 * @return {zxt.ui.Fieldset} 创建的区域对象
 */
zxt.ui.Fieldset.parse = function(elem) {
	var j = elem;
	if (!(elem instanceof jQuery)) {
		j = $(elem);
	}

	var _title = j.attr("zxt.title");
	var _width = j.attr("zxt.width");
	var _folded = j.attr("zxt.folded");
	var _fixed = j.attr("zxt.fixed");

	var _instance = new zxt.ui.Fieldset(_title, _width, _folded, _fixed);

	j.children().each(function(i, dom) {
		_instance.addElement(dom);
	});

	return _instance;
};


zxt.defineClazz(zxt.ui.Fieldset, zxt.ui.Widget);
/**
 * <p>
 * 返回控件类型
 * </p>
 * 
 * @function
 * @returns {string} "zxt.ui.Fieldset"
 */
zxt.ui.Fieldset.prototype.getType = function() {
	return "zxt.ui.Fieldset";
};

/**
 * <p>
 * 重新渲染该区域的DOM节点
 * </p>
 * 
 * @function
 */
zxt.ui.Fieldset.prototype.renderInner = function() {
	var host = this;

	this._$jqDom.css( {
		width : this._width
	});

	if (this._fixed == false) {
		var _div = this._$contentDiv;

		if (this._folded) {
			_div.animate( {
				height : "hide"
			}, 200);
		} else {
			_div.animate( {
				height : "show"
			}, 200);
		}
		
		if (this._folded == true) {
			this._$legend.attr("title", this.SHOWMESS);
			this._$foldImg.attr("src", this.SHOWICON);
			this._$fieldset.removeClass("fieldsetOpen").addClass(
					"fieldsetClose");
		} else {
			this._$legend.attr("title", this.HIDEMESS);
			this._$foldImg.attr("src", this.HIDEICON);
			this._$fieldset.removeClass("fieldsetClose").addClass(
					"fieldsetOpen");
		}		
	}
};

/**
 * <p>
 * 渲染该区域的DOM节点
 * </p>
 * 
 * @function
 * @return {DOM} 渲染成的DOM节点
 */
zxt.ui.Fieldset.prototype.renderSelf = function() {

	var host = this;

	var titleSpan = $("<span class=" + 
			// to delete
			"fieldset-title"
			+ ">" + this._title
			+ "</span>");

	this._$legend.empty().append(titleSpan);
	this._$fieldset.addClass("fieldset");
	
	if (this._fixed) {
		
		this._$fieldset.addClass("fieldsetFixed");

	} else {
		
		this._$legend.append(this._$foldImg);
		
		this._$legend.hover(function() {
			
			host._$foldImg.css("opacity","0.8");
		}, function() {
			host._$foldImg.css("opacity","0.3");
		});
		
		//解决初始化闭合时内容仍然显示问题
		if(this._folded == true){
			this._$contentDiv.hide();
		}
		
		this._$legend.click(function() {
			host.onClick();
		}).css("cursor", "pointer");
		
		this._$fieldset.addClass("fieldset");
		
		
	}

	this._$fieldset.append(this._$legend).append(this._$contentDiv);
	this._$jqDom.append(this._$fieldset);

	this.renderInner();

	return this._$jqDom.get(0);
};

/**
 * <p>
 * 展开区域控件。
 * </p>
 * 
 * @function
 */
zxt.ui.Fieldset.prototype.openFieldset = function() {
	this._folded = false;
	this.renderInner();
};

/**
 * <p>
 * 折叠区域控件。
 * </p>
 * 
 * @function
 */
zxt.ui.Fieldset.prototype.closeFieldset = function() {
	this._folded = true;
	this.renderInner();
};

/**
 * <p>
 * 区域控件收缩的图标的点击事件处理。
 * </p>
 * 
 * @event
 */
zxt.ui.Fieldset.prototype.onClick = function() {
	if (!this._folded) {

		this.closeFieldset();
	} else {
		this.openFieldset();
		
	}
};

/**
 * <p>
 * 向内部添加DOM节点。
 * </p>
 * 
 * @function
 * @param {DOM} element 传入的DOM元素
 */
zxt.ui.Fieldset.prototype.addElement = function(element) {
	this._$contentDiv.append(element);
	this.renderInner();
};

/**
 * <p>
 * 向内部添加widget控件。
 * </p>
 * 
 * @function
 * @param {Widget} widget 传入的widget控件
 */
zxt.ui.Fieldset.prototype.addWidget = function(widget) {
	var element = widget.render();
	this._$contentDiv.append(element);
	this.renderInner();
};
